import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

let renderer, camera, scene, light, meshes;
let axesHelper
let controls

let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2(1,1);

let amount = 10
let count = Math.pow(amount, 3)
let colored = 0

let color = new THREE.Color()
let white = new THREE.Color().setHex(0xffffff)

initRenderer()
initCamera()
scene = new THREE.Scene()
initLight()
initAxesHelper()
initMeshes()

controls = new OrbitControls(camera, renderer.domElement)
render()

window.addEventListener('resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
})

//监听鼠标事件
document.addEventListener('mousemove',function (event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1  //-1-1之间
    mouse.y = -(event.clientY / window.innerHeight) *2 + 1 //y轴方向相反加负号
})

function initRenderer() {
    renderer = new THREE.WebGLRenderer()
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
    camera.position.set(10,10,10)
}

function initLight(params) {
    light = new THREE.HemisphereLight(0xffffff, 0x888888)
    light.position.set(0, 1, 0)
    scene.add(light)
}

function initAxesHelper(params) {
    axesHelper = new THREE.AxesHelper(3)
    scene.add(axesHelper)
}

function initMeshes() {
    const geometry = new THREE.IcosahedronGeometry(0.5,3) //正20面体 半径0.5
    const material = new THREE.MeshPhongMaterial({ color: 0xffffff }) // 白色
    meshes = new THREE.InstancedMesh(geometry, material, count)
      
    let index = 0
    const offset = (amount - 1) / 2  //4.5
    const matrix = new THREE.Matrix4()

    for (let i = 0; i < amount; i++) {
        for (let j = 0; j < amount; j++) {
            for (let k = 0; k < amount; k++) {
                matrix.setPosition(offset - i, offset - j, offset - k);  //-4.5``4.5
                meshes.setMatrixAt(index, matrix);
                meshes.setColorAt(index,white)
                // meshes.setColorAt(index,new THREE.Color(0).setHex(Math.random()*0xffffff))

                index = index + 1
            }
        }
    }
    scene.add(meshes)
}

function render(params) {
    requestAnimationFrame(render)
    raycaster.setFromCamera(mouse, camera)
    const intersection = raycaster.intersectObject(meshes)
    if (intersection.length > 0) {
        const instanceId = intersection[0].instanceId
        meshes.getColorAt(instanceId, color);
        if (color.equals(white)) {
            meshes.setColorAt(instanceId, color.setHex(Math.random() * 0xffffff));
            meshes.instanceColor.needsUpdate = true;
            colored = colored + 1
        }
    }
    document.querySelector('div.status').innerHTML = colored + '/' + count
    // console.log(intersection.length);

    renderer.render(scene,camera)
}
